<template>
	<view>
		<u-tabbar :value="indexShow" @change="changeTab" activeColor="#F4BD38">
			<u-tabbar-item text="地图" name="map">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabbar/index-ok.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabbar/index-no.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="群聊" name="chat">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabbar/chat-ok.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabbar/chat-no.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" name="user">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabbar/mine-ok.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabbar/mine-no.png"></image>
			</u-tabbar-item>
		</u-tabbar>
		<u-popup :show="inviteShow" @close="closeInvite" mode="center" round="14rpx">
			<view class="pop-wrap">
				<image class="code" :src="code" show-menu-by-longpress></image>
				<view class="submit flexAJC">
					长按图片保存群二维码
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			index: {
				type: String,
				default: 'map'
			}
		},
		data() {
			return {
				indexShow: 'map',
				inviteShow: false,
				code: ''
			};
		},
		watch: {
			index: {
				handler(e) {
					this.indexShow = e
				},
				immediate: true
			}
		},
		methods: {
			closeInvite(){
				this.indexShow = this.index
				this.inviteShow = false
			},
			changeTab(idx) {
				this.indexShow = idx
				if (idx === 'chat') {
					this.$api.index.erweima().then(res => {
						this.code = res.data.image
						this.inviteShow = true
					})
				} else if (idx === 'map') {
					uni.redirectTo({
						url: "/pages/index/index"
					})
				} else if (idx === 'user') {
					uni.redirectTo({
						url: "/pages/mine/mine"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pop-wrap {
		width: 616rpx;
		padding: 88rpx 0 58rpx;

		.code {
			width: 400rpx;
			height: 400rpx;
			display: block;
			margin: 0 auto 64rpx;
		}

		.submit {
			width: 400rpx;
			height: 110rpx;
			border-radius: 54rpx;
			font-size: 32rpx;
			color: #F4BD38;
			margin: 0 auto;
		}
	}

	.u-page__item__slot-icon {
		width: 45rpx;
		height: 45rpx;
	}
</style>